<template>
  <div class="state" v-if="this.buliterRechargeHistory.length">
    <el-table v-if="som"
        :data="this.buliterRechargeHistory.slice((currentPage-1)*pagesize,currentPage*pagesize).filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
        <el-table-column prop="userName" label="用户名"></el-table-column>      
        <el-table-column prop="mobileNo" label="手机号"></el-table-column>
        <el-table-column prop="payChannel" label="充值渠道">
          <template slot-scope="scope">
                {{scope.row.payChannel == 2 ?'微信':'支付宝'}}
            </template>
        </el-table-column>
        <el-table-column prop="money" label="价格（元）"></el-table-column>
        <el-table-column prop="successTime" label="充值时间"></el-table-column>
    </el-table>
    <el-pagination v-if="som"
        align="center"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next"
        :total="totalList">
    </el-pagination>
    <router-view />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  created(){
    let manageId = this.$route.query.manageId;
    if(manageId){
      this.getBuliterRechargeHistory({manageId:manageId});
    }else{
      this.$alert('错误，请重试！');
    }
    
  },
  data() {
    return {
      pagesize:7,
      currentPage:1,
      som : true,
      search: '',
    }
  },
  computed:{
    ...mapState({
      buliterRechargeHistory: state => state.butlerModule.buliterRechargeHistory,
        RechargeRecord: state => state.butlerModule.RechargeRecord
    }),
    totalList(){
      let length = this.buliterRechargeHistory.length;
      return length;
    }
  },
  methods:{
    ...mapActions({
        getBuliterRechargeHistory:'butlerModule/getBuliterRechargeHistory'
    }),
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    }
  },
  // 路由守卫判断 是否进入详情页,隐藏添加客服按钮
  beforeRouteUpdate(to, from, next){
      if((to.path !== '/butler/find')&&(from.path === '/butler/find')){
          this.som = false;
      }else{
          this.som = true;
      }
      next();
  },
  //不是详情页刷新页面，隐藏添加客服按钮
  mounted(){
      if(this.$route.path !== '/butler/find'){
          this.som = false;
      }
  }
}
</script>

<style lang="scss" scoped>
.state{
  width: 100%;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}

</style>

